<template>
	<div class="home">
		<el-row>
			<el-col :span="3">
				<el-menu
					background-color="#fff"
					text-color="#000"
					active-text-color="#008792"
				>
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>导航一</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group title="分组2">
							<el-menu-item index="1-3">选项3</el-menu-item>
						</el-menu-item-group>
						<el-submenu index="1-4">
							<template slot="title">选项4</template>
							<el-menu-item index="1-4-1">选项1</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-menu-item index="2">
						<i class="el-icon-menu"></i>
						<span slot="title">导航二</span>
					</el-menu-item>
					<el-menu-item
						index="3"
						disabled
					>
						<i class="el-icon-document"></i>
						<span slot="title">导航三</span>
					</el-menu-item>
					<el-menu-item index="4">
						<i class="el-icon-setting"></i>
						<span slot="title">导航四</span>
					</el-menu-item>
				</el-menu>
			</el-col>
			<el-col :span="19">
				<el-menu
					class="el-menu-demo"
					mode="horizontal"
					background-color="#fff"
					text-color="#000"
					active-text-color="#008792"
				>
					<el-menu-item>
						<i class="el-icon-s-fold"></i>
					</el-menu-item>
					<el-menu-item index="1">处理中心</el-menu-item>
					<el-submenu index="2">
						<template slot="title">我的工作台</template>
						<el-menu-item index="2-1">选项1</el-menu-item>
						<el-menu-item index="2-2">选项2</el-menu-item>
						<el-menu-item index="2-3">选项3</el-menu-item>
						<el-submenu index="2-4">
							<template slot="title">选项4</template>
							<el-menu-item index="2-4-1">选项1</el-menu-item>
							<el-menu-item index="2-4-2">选项2</el-menu-item>
							<el-menu-item index="2-4-3">选项3</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-menu-item
						index="3"
						disabled
					>消息中心</el-menu-item>
					<el-menu-item index="4">订单管理</el-menu-item>
				</el-menu>
			</el-col>
			<el-col :span="1">
				<el-dropdown>
					<div style="padding-top: 5px;cursor: pointer;">
						<el-avatar
							shape="circle"
							:size="50"
							:src="squareUrl"
						></el-avatar>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="logout">注销</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	data() {
		return {
			squareUrl:
				"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
		};
	},
	methods: {
		logout() {
			console.log("注销");
			// 删除cookie信息
			this.$router.push('/login');
		},
	},
};
</script>
